<template>
  <BaseMainSlot>
    <template v-slot:content>
      <div class="farm-main">
        <div class="tr-sid">
          <div class="sid-head">选择设施</div>
          <div class="sid-tree">
            <treeSide @treeselectvalue="treeselectvalue" :queryType="'3'" />
          </div>
        </div>
        <div id="video_container" class="cameraview-box">
          <!-- 预热加载动画 -->
          <div v-if="startUp === 'true' && cricleAdd" class="cricle">
            <countDown :start-time="startTime" :step="-1" />
            <p>预热加载中,请耐心等待</p>
          </div>
          <!-- <iframe  :src="nowcameraurl" style="width: 100%; height: 100%"></iframe> -->
          <div v-if="showFace === 'play'" style="width: 100%; height: 100%">
            <div id="video-container" style="width: 100%; height: 100%"></div>
          </div>
          <div
            v-if="showFace === 'notCameraList'"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <h1>暂无摄像头</h1>
          </div>
          <div
            v-if="showFace === 'downFlow'"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <h1>萤石云流量不足，功能受限</h1>
          </div>
          <div
            v-if="showFace === 'transCamera'"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          ></div>
          <div
            v-if="showFace === 'notCameraData'"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <h1>未取得该摄像头数据</h1>
          </div>
          <div
            v-if="showFace === 'timeout'"
            style="
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <h1>静置超时，请刷新重新启动</h1>
          </div>
          <!-- <div id="full_screen" class="allScream">
            <svg-icon :icon-class=" showscreen ? 'enter-full-screen' : 'exit-full-screen'" />
          </div> -->
        </div>
        <div class="cameralist-box">
          <zhcameralist
            :cameralistparam="paramslist"
            @nowcameraurl="getcamerurl"
            @getUploadTime="handleLoading"
          />
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>
<script>
// import treeSide from "./component/trelist.vue"
import treeSide from "@/components/selectbutton/trelist.vue";
import zhcameralist from "./component/cameralist.vue";
import nowpagereq from "@/api/basic-info-manage/camera-management/index";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import countDown from "@/components/count-down/index";
import screenfull from "screenfull";
import EZUIKit from 'ezuikit-js';
var player = null

export default {
  name: "VideoSurveillance",
  components: { treeSide, BaseMainSlot, zhcameralist, countDown },
  data() {
    return {
      startTime: 60,
      cricleAdd: false,
      startUp: "false",
      showscreen: true,
      loading: true,
      // 表格选中id
      tableselectidlist: "",
      // 当前选中地块组名或地亏啊名
      facilityName: "",
      // 当前选中cameraindex
      nowcameraindex: "",
      addcameraVisible: false,
      paramslist: {},
      cameralist: [],
      // 当前视频播放地址
      nowcameraurl: "",
      // 是否展示视频窗口
      showFace: "transCamera",
      timer: null
    };
  },
  watch: {},
  mounted() {
    // let That = this
    // const element = document.getElementById("video_container");
    // document.getElementById("full_screen").addEventListener("click", () => {
    //   player.stopSave()
    //   That.showFace = 'timeout'
    //   // return
    //   if (screenfull.isFullscreen) {
    //     That.showscreen = true;
    //     setTimeout(() => {
    //       That.showFace = 'play'
    //       // return console.log('1')
    //       player.stop().then(() => {
    //         player.play();
    //       }, 200)
    //     });
    //     screenfull.toggle();
    //   } else {
    //     if (screenfull.isEnabled) {
    //       // return console.log('2', That.showFace)
    //       setTimeout(() => {
    //         That.showFace = 'play'
    //         player.stop().then(() => {
    //           player.play();
    //         }, 200)
    //       });
    //       screenfull.request(element); // 元素全屏
    //       That.showscreen = false;
    //     }
    //   }
    // });
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    this.timer = null;
    player?.stop();
  },
  deactivated() {
    clearTimeout(this.timer);
    this.timer = null;
    player.stop();
  },
  methods: {
    getcamerurl(e, method = undefined) {
      // 不存在地址 不展示摄像头
      // console.log(e)
      player?.stop();
      if (document.getElementById('video-container-wrap')) {
        let e = document.getElementById("video-container-wrap");
        e.style.display = "none";
      }
      if (e === "transCamera") {
        // 切换摄像头
        this.showFace = "transCamera";
        this.loading = false;
        this.cricleAdd = false;
        clearTimeout(this.timer);
        return;
      } else if (e === "downFlow") {
        // 流量不足无法播放
        this.showFace = "downFlow";
        this.loading = false;
        return;
      } else if (e === "notCameraData") {
        // 未获取到该摄像头数据
        this.showFace = "notCameraData";
        this.loading = false;
        return;
      } else if (e === "notCameraList") {
        // 暂无摄像头
        this.showFace = "notCameraList";
        this.loading = false;
        return;
      } else if (e === "timeout") {
        this.showFace = "timeout";
        this.loading = false;
        return;
      }
      this.nowcameraurl = e;
      setTimeout(() => {
        this.showFace = "play";
        // console.log(e, method)
        if (player) {
          player.stop();
        }
        if (method !== undefined) {
          player = new EZUIKit.EZUIKitPlayer({ audio: 1, enableSharedArrayBufferGuide: true, width: 1980,
            height: 1080, template: 'security', ...method })
          // player.reSize('100%', '100%');
          player.stop().then(() => {
            player.play();
          });
        }
      }, 200);
    },
    // 点击树状触发方法
    treeselectvalue(e) {
      let dd = e.organizationNo;
      this.paramslist = {};
      if (!dd) {
        this.$message.warning("请勿选择此地块组");
        return;
      }
      this.facilityName = e.facilityName;
      this.addActive = true;
      if (e.facilityGroupNo) {
        this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
      }
      this.getTableDataList();
    },
    // 获取相机列表数据
    getTableDataList() {
      let e = this.paramslist;
      // console.log(e)
      this.paramslist = {};
      if (e.facilityGroupNo) {
        this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
        let param = {
          page: 1,
          size: 10
        };
        let partwo = {
          facilityGroupNo: e.facilityGroupNo
        };
        nowpagereq.getlist(param, partwo).then(res => {
          let data = res.data.content;
          this.cameralist = data;
        });
        return;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
        let param = {
          page: 1,
          size: 10
        };
        let partwo = {
          facilityNo: e.facilityNo
        };
        nowpagereq.getlist(param, partwo).then(res => {
          let data = res.data.content;
          this.cameralist = data;
        });
      }
    },
    // 点击相机，获取相机数据，拼接完整video路径
    clickcamerames(e) {
      let nowcamerid = e.cameraid;
      console.log(nowcamerid);
    },
    // 参数1：时长 参数2：是否预热
    handleLoading(durTime, startUp) {
      this.timer = null;
      this.startUp = startUp;
      this.startTime = 60;
      this.cricleAdd = true;
      this.timer = setTimeout(() => {
        this.cricleAdd = false;
      }, durTime * 60000 + 200);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-select .el-input__inner {
  color: #272929 !important;
}
::v-deep {
  .zhcontent {
    overflow: hidden !important;
  }
}
.main {
  width: 100%;
  height: 100%;
}
.farm-main {
  width: 100%;
  height: calc(100%);
  // height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .tr-sid {
    width: calc(20% - 15px);
    margin-left: 10px;
    margin-right: 5px;
    height: 100%;
    padding: 0 10px 10px;
    background-color: #074052;
    .sid-head {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      text-align: center;
      border-bottom: #fff dashed 1px;
    }
    .sid-tree {
      width: 100%;
      height: calc(100% - 40px);
    }
  }
  .cameraview-box {
    width: calc(60% - 10px);
    height: 100%;
    border: 8px double #fff;
    background-color: #363839;
    position: relative;
    .cricle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .allScream {
      position: absolute;
      font-size: 24px;
      right: 10px;
      bottom: 10px;
    }
  }
  .cameralist-box {
    width: calc(20% - 20px);
    height: 100%;
  }
}
// #video-container {
//   width: 100% !important;
//   height: 100% !important;
// }
::v-deep {
  #video-container-wrap {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;
      #video-container-headControl {
        display: none !important;
      }
    #video-container {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;
    .video-containerparent-wnd {
      > div {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
      }
    }
    #video-containercanvas0 {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100% !important;
      height: 100% !important;
    }
  }
  }
}
</style>
